import Vditor from "vditor";
import "vditor/src/assets/less/index.less"
import {FILE_URL_FIELD_NAME, fileUploadAPI, TIP_MSG_FIELD_NAME} from "@/api/file.js";
import {elErrorMessageTip, elSuccessMessageTip} from "@/utils/MessageTipUtils.js";

// vditor 默认配置对象
export let vditorDefaultOptions = {
    height: 790,
    width: '100%',
    // 编辑器模式 所见即所得
    mode: 'wysiwyg',
    // 工具栏
    toolbar: [
        // 大纲
        'outline', '|',
        // 标题、加粗、斜体、删除线
        'headings', 'bold', 'italic', 'strike', '|',
        // 撤回、重做
        'undo', 'redo', '|',
        'quote', 'list', 'ordered-list', 'check', 'outdent', 'indent', 'code', 'inline-code', 'insert-after',
        'insert-before', 'link', 'line', 'table', '|',
        'upload', '|', 'edit-mode', 'preview', 'fullscreen', 'code-theme', 'content-theme', 'export', 'help', 'br'
    ],
    toolbarConfig: {
        pin: true,
    },
    cache: {
        enable: false,
    },
    upload: {
        // 自定义文件上传处理
        handler: async (files) => {
            for (const file of files) {
                // 文件上传
                const res = await fileUploadAPI(file)
                if (res.status) {
                    // 成功
                    elSuccessMessageTip(res[TIP_MSG_FIELD_NAME])
                    // 文件在线访问路径
                    const fileUrl = res[FILE_URL_FIELD_NAME]
                    // 编辑器中插入图片
                    vditor.insertValue(`![${file.name}](${fileUrl})`)
                } else {
                    // 失败
                    elErrorMessageTip(res[TIP_MSG_FIELD_NAME] + file.name)
                    // 编辑器中插入图片上传失败
                    vditor.insertValue(`![${file.name}]上传失败`)
                }
            }
        }
    },
    // 编辑渲染之后做...
    after: () => {
        // 设置编辑初始内容
        vditor.setValue("")
    },
    // 编辑器失去焦点
    blur(value) {
        console.log(value)
    },
    // 图片配置
    image: {
        // 开启图片预览
        isPreview: true,
        preview(bom) {
            console.log(bom)
        }
    }
}

/**
 * 生成 vditor 对象
 *
 * @param elId 放置生成的编辑器页面元素 id
 * @param options 配置对象
 * @returns {Vditor}
 */
export const genVditor = (elId, options = vditorDefaultOptions) => {
    return new Vditor(elId, options)
}